<template>
    <div class="viewUserCoupons text">
        <div class="big">
            <!--头部—优惠券查询-->
            <div class="top">
                <div class="Leftgreen"></div>
                <div class="other">
                    &nbsp;优惠券查询
                    <div class="Topbutton">
                        <el-button class="el-button" @click="refresh">
                            <i class="el-icon-refresh"></i>
                            刷新
                        </el-button>
                        <el-button class="el-button" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回
                        </el-button>
                    </div>
                </div>
            </div>
            <!--筛选查询—头-->
            <div class="search">
                &nbsp;&nbsp;
                <i class="el-icon-search"></i>
                <span class="text2 line">&nbsp;筛选查询</span>
                <el-button class="el-button searchbutton" @click.native="sift">查询结果</el-button>
                <!--展开收起-->
                <div class="UD" >
                    <a href="#" class="aUD" @click="changeadvanced" >
                        {{ advanced ? "收起筛选" : "展开筛选" }}
                        <i :class="advanced ? 'el-icon-caret-bottom' : 'el-icon-caret-top'" />
                    </a>
                </div>
            </div>
            <!--筛选查询—查询框-->
            <transition name="el-zoom-in-top">
                <div class="searchInterior text2" style="display: flex;" v-show="advanced">
                    <el-form ref="form" label-width="90px">
                        <el-form-item label="用户账号/ID:" class="item" >
                            <el-input v-model="form.userInformation" placeholder="请输入用户ID/账号"></el-input>
                        </el-form-item>
                        <el-form-item label="用户昵称:" class="item" >
                            <el-input v-model="form.userNickname" placeholder="请输入用户昵称"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </transition>
            <!--数据列表—头-->
            <div class="data">
                &nbsp;&nbsp;
                <i class="el-icon-document"></i>
                <span class="text2 line">&nbsp;数据列表</span>
                <el-button disabled class="databutton">排序方式<i class="el-icon-caret-bottom"></i></el-button>
                <el-button disabled class="databutton">显示条数<i class="el-icon-caret-bottom"></i></el-button>
            </div>
            <!--数据列表—表格-->
            <div class="tableUsedList">
                <el-table class="el-table"
                          :header-cell-style="{background:'#f6f7f9'}"
                          :data="tableUsedList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                          border>
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column prop="userId" align="center" label="用户ID" sortable></el-table-column>
                    <el-table-column prop="userAccount" label="用户账号" sortable></el-table-column>
                    <el-table-column width="200px" align="center" prop="userNickname" label="用户昵称" sortable></el-table-column>
                    <el-table-column prop="used" align="center" label="已使用" sortable></el-table-column>
                    <el-table-column prop="notUsed" align="center" label="未使用" sortable></el-table-column>
                    <el-table-column prop="expired" align="center" label="已过期" sortable></el-table-column>
                    <el-table-column width="200px" align="center" label="操作" fixed="right" style="width: 400px">
                        <template slot-scope="scope">
                            <router-link to="/viewTheDetails" class="detailsA">
                                <el-button type="text" size="small" @click="handleClick(scope.row)">
                                    查看明细
                                </el-button>
                            </router-link>
                            <el-button type="text" size="small" @click="GiveAwayCoupons">赠送优惠券</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--尾部—分页部分-->
                <div class="pagination">
                    <div class="paginationLeft">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button class="FYqd">确定</el-button>
                    </div>
                    <div style="margin-top:.2rem;margin-left: .2rem;">
                        <el-pagination background
                                       @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="[8,6,4,2]"
                                       :page-size="pagesize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="tableUsedList.length" style="padding: 8px 0px 0px 375px;">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <!--赠送优惠券弹出框-->
            <div class="GiveAwayCoupons">
                <el-dialog title="赠送优惠券" :visible.sync="dialogFormVisible" class="title"  width="1056px">
                    <!--数据列表—表格-->
                    <div class="tableList">
                        <el-table class="el-table"
                                  :header-cell-style="{background:'#f6f7f9'}"
                                  :data="tableList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                  border>
                            <el-table-column type="selection" align="center"></el-table-column>
                            <el-table-column prop="couponsCode" align="center" label="优惠码" sortable></el-table-column>
                            <el-table-column prop="couponsName" align="center" label="优惠券名称" sortable></el-table-column>
                            <el-table-column prop="money2" align="center" label="面额" sortable></el-table-column>
                            <el-table-column prop="getWay2" align="center" label="领取方式" sortable></el-table-column>
                            <el-table-column prop="getDate" align="center" label="领取时间" sortable>
                                <template slot-scope="scope">
                                    <el-switch class="switch"
                                               v-model="scope.row.couponsOnline"
                                               active-color="#EFEFEF"
                                               inactive-color="#1ABC9C"
                                               :active-value="3"
                                               :inactive-value="2"
                                               :plain="true"
                                               @change="changeSwitch(scope.row)">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="couponsGrant" align="center" label="当前状态" sortable>
                                <template slot-scope="props">
                                    <el-row>
                                        <el-col>
                                            <span v-if="props.row.couponsGrant == '2'">自动发放</span>
                                            <span v-if="props.row.couponsGrant == '3'">活动领取</span>
                                            <span v-if="props.row.couponsGrant == '4'">人工发放</span>
                                            <span v-if="props.row.couponsGrant == '5'">无限制</span>
                                        </el-col>
                                    </el-row>
                                </template>
                            </el-table-column>
                            <el-table-column prop="useDate" align="center" label="使用时间" sortable></el-table-column>
                            <el-table-column prop="issueQuantity" align="center" label="订单编号" sortable></el-table-column>
                        </el-table>
                    </div>
                    <!--尾部—分页部分-->
                    <div class="GivePagination">
                        <div class="GivePaginationLeft">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <el-button style="position: absolute;
  bottom: 108.5px;
  left: 875px;">确定</el-button>
                        </div>
                        <div style="margin-top:.2rem;margin-left: .2rem;">
                            <el-pagination background
                                           @size-change="handleSizeChangeGive"
                                           @current-change="handleCurrentChangeGive"
                                           :current-page="GiveCurrentPage"
                                           :page-sizes="[8,6,4,2]"
                                           :page-size="GivePagesize"
                                           layout="total, sizes, prev, pager, next, jumper"
                                           :total="tableList.length" style="padding: 8px 0px 0px 375px;">
                            </el-pagination>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button class="sure">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "viewUserCoupons",
        data(){
            return{
                //查询框展开收起
                advanced: false,
                //定义表数据集合
                tableUsedList:[],
                //定义赠送优惠券表数据集合
                tableList:[],
                form: {
                    //表数据
                    userId:'',
                    userAccount:'',
                    userNickname:'',
                    used:'',
                    notUsed:'',
                    expired:'',
                    //类型转换数据
                    userInformation:'',
                },
                //赠送优惠券弹框
                dialogFormVisible:false,
                //用户使用记录表分页数据
                currentPage: 1,
                currentIndex: '',
                GivePagesize: 8,
                //赠送优惠券分页数据
                GiveCurrentPage: 1,
                currentIndex: '',
                pagesize: 8,
            }
        },
        methods:{
            //刷新按钮方法
            refresh(){
                window.location.reload();
            },
            //返回按钮方法
            back(){
                this.$router.back()
            },
            //查询框开收方法
            changeadvanced() {
                this.advanced = !this.advanced;
            },
            //渲染后台用户优惠券使用记录表
            async getCouponsUsedAll() {
                const {data: res} = await this.$http.post('/couponsUsed/getCouponsUsedAll')
                this.tableUsedList = res;
            },
            //用户使用记录表分页
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage= val
            },
            //赠送优惠券分页
            handleSizeChangeGive(val) {
                this.GivePagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChangeGive(val) {
                this.GiveCurrentPage= val
            },
            //提示筛选搜索方式
            prompt() {
                this.$message('按Enter键进行搜索');
            },
            //筛选查询方法
            async sift(){
                console.log(this.form.userInformation);
                const {data:res} = await this.$http.post("/couponsUsed/getCouponsUsedFuzzyCheck",
                    {
                    "userId":this.form.userInformation,
                    "userAccount":this.form.userInformation,
                    "userNickname":this.form.userNickname,
                })
                this.tableUsedList = res;
            },
            //查看明细
            handleClick(row){
                console.log('======================================')
                console.log(row)
                   /* this.form.userId = row.userId,
                    this.form.userAccount = row.userAccount,
                    this.form.userNickname = row.userNickname,
                    this.form.used = row.used,
                    this.form.notUsed = row.notUsed,
                    this.form.expired = row.expired*/
                this.$store.commit("setCouponsUsed", row)
            },
            //赠送优惠券弹框
            GiveAwayCoupons(){
                this.dialogFormVisible = true;
            },
            //赠送优惠券取消按钮
            cancel(){
                this.dialogFormVisible = false
            }
        },
        created(){
            //调用“渲染后台用户优惠券使用记录表”方法
            this.getCouponsUsedAll();
        }
    }
</script>

<style scoped>
    .viewUserCoupons{
        width: 100%;
        height: 100%;
        background-color: #F6F7F9;
    }
    .top{
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        height: 40px;
        line-height: 40px;
    }
    .Leftgreen{
        background-color: #1ABC9C;
        width: 4px;
        height: 19px;
        float: left;
        margin-top: 11px;
    }
    .text{
        color: #978f96;
        font-family: Arial;
    }
    .text2{
        color: #5C6573;
    }
    .Topbutton{
        float: right;
        margin-right: 40px;
        margin-top: 1.5px;
    }
    .el-button{
        margin-right: 15px;
        height: 30px;
        Padding-top:8px
    }
    .search{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .searchInterior{
        background-color: white;
        height: 60px;
        width: 1092px;
        border: 1px #d5d5d5 solid;
        margin-top: -41px;
        margin-bottom: 10px;
    }
    .searchbutton{
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    .item{
        width:300px;
        float: left;
        margin: 10px 10px 0px 10px;
    }
    .UD{
        position: relative;
        top: -38px;
        left: 880px;
        width: 75px;
    }
    .aUD{
        color: #978f96;
        text-decoration: none;
    }
    .aUD:hover{
        color: #509f92;
    }
    .data{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .databutton{
        float: right;
        margin-right: 15px;
        margin-top: 5px;
    }
    .tableUsedList{
        border: 1px #d5d5d5 solid;
        width: 1093px;
    }
    .pagination{
        height: 49px;
        width: 1094px;
        background-color: #FFF;
        border: 1px #d5d5d5 solid;
    }
    .paginationLeft{
        float: left;
        padding: 10px 0px 0px 40px;
    }
    .FYqd{
        position: relative;
        left: 805px;
    }
    .detailsA{
        text-decoration: none;
        color: #409EFF;
    }
    .detailsA:hover{
        color: #66B9FD;
        text-decoration: none;
    }
    .sure{
        background-color: #409EFF;
        color: #fff;
    }
    .sure:hover{
        background-color: #2e73b9;
        color: white;
    }
    .GiveAwayCoupons{
        width: 1500px;
    }
</style>